<template>
  <div class="container">
    <div class="title">Button组件Demo</div>
    <!-- 不同效果btn展示demo -->
    <ButtonDefault></ButtonDefault>
    <ButtonRadius></ButtonRadius>
    <ButtonDisabled></ButtonDisabled>
    <ButtonFont></ButtonFont>
    <ButtonLoading></ButtonLoading>
    <ButtonSize></ButtonSize>
  </div>
</template>

<script setup lang="ts">
import ButtonSize from "../components/Button/ButtonSize.vue";
import ButtonDefault from "../components/Button/ButtonDefault.vue";
import ButtonDisabled from "../components/Button/ButtonDisabled.vue";
import ButtonFont from "../components/Button/ButtonFont.vue";
import ButtonLoading from "../components/Button/ButtonLoading.vue";
import ButtonRadius from "../components/Button/ButtonRadius.vue";
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  padding: 50px 80px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  .title {
    font-size: 36px;
    margin-bottom: 25px;
    margin-left: 50px;
  }
}
</style>
